<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="bp" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:useBean id="timestamp" class="java.util.Date"/>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cssmoban</title>
    <!-- Bootstrap Styles-->
    <link href="${bp}/static/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="${bp}/static/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="${bp}/static/assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="${bp}/static/assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="${bp}/static/assets/js/Lightweight-Chart/cssCharts.css">
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="${bp}/user/index">
                <strong>蓝天洗衣管理系统</strong>
            </a>

            <div id="sideNav" href="">
                <i class="fa fa-caret-right"></i>
            </div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-bell fa-fw"></i>

                    <c:if test="${orderconet > 0}">
                        <span class="badge" style="color: red">${orderconet}</span>
                    </c:if>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="${bp}/order/orderAll">
                            <c:if test="${orderconet > 0}">
                                <i class="fa fa-comment fa-fw"></i>${orderconet}个订单等待您处理
                            </c:if>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">

                    <li>
                        <a href="${bp}/user/userInfo">
                            <i class="fa fa-user fa-fw"></i> 用户信息</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="${bp}/user/loginOut">
                            <i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a  href="${bp}/user/index">
                        <i class="fa fa-dashboard"></i>首页</a>
                </li>
                <li>
                    <a  href="${bp}/user/user?page=1">
                        <i class="fa fa-dashboard"></i>用户管理</a>
                </li>
                <li>
                    <a href="${bp}/order/orderAll">
                        <i class="fa fa-qrcode"></i>订单管理</a>
                </li>
                <li>
                    <a href="${bp}/equipment/equipment?page=1">
                        <i class="fa fa-desktop"></i>消耗品管理</a>
                </li>
                <li>
                    <a class="active-menu" href="${bp}/log/log">
                        <i class="fa fa-bar-chart-o"></i>日志记录</a>
                </li>
                <li>
                    <a href="${bp}/work/work?page=1">
                        <i class="fa fa-table"></i>职员管理</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                日志记录
                <small>欢迎您，${sessionScope.user.name}</small>
            </h1>
        </div>
        <div id="page-inner">

            <div class="row">
                <div class="col-md-3 col-sm-12 col-xs-12">
                    <div class="panel panel-primary text-center no-boder " id="tab1" onclick="today()" style="background-color: #FFFFFF" >
                        <div class="panel-left pull-left blue" style="background:#fff;">
                            <i class="fa fa-eye fa-5x"></i>

                        </div>
                        <div class="panel-right">
                            <h3>本日订单</h3>
                            <strong> ${Today1}条</strong>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-12 col-xs-12">
                    <div class="panel panel-primary text-center no-boder blue" id="tab2" onclick="todaySuccess()">
                        <div class="panel-left pull-left blue">
                            <i class="fa fa-shopping-cart fa-5x"></i>
                        </div>

                        <div class="panel-right">
                            <h3>本日完成 </h3>
                            <strong> ${success2}条</strong>

                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-12 col-xs-12">
                    <div class="panel panel-primary text-center no-boder blue" id="tab3" onclick="noSuccess()">
                        <div class="panel-left pull-left blue">
                            <i class="fa fa fa-comments fa-5x"></i>

                        </div>
                        <div class="panel-right">
                            <h3>本日未处理 </h3>
                            <strong> ${Untreated3}条 </strong>

                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-12 col-xs-12">
                    <div class="panel panel-primary text-center no-boder blue" id="tab4" onclick="income()">
                        <div class="panel-left pull-left blue">
                            <i class="fa fa-users fa-5x"></i>

                        </div>
                        <div class="panel-right">
                            <h3>营业额统计</h3>
                            <strong>${Turnover4}元</strong>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="today">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th style="width: 12%">时间</th>
                                <th style="width: 20%">订单号</th>
                                <th style="width: 10%">名字</th>
                                <th style="width: 10%">金额</th>
                                <th style="width: 10%">数量</th>
                                <th style="width: 10%">状态</th>
                                <td >备注</td>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${Today}" var="keyword" varStatus="id">
                                <tr>
                                    <td><jsp:setProperty name="timestamp" property="time" value="${keyword.orderDate}"/>
                                        <fmt:formatDate value="${timestamp}" pattern="yyyy/MM/dd/ HH:mm:ss"/></td>
                                    <td>${keyword.orderNo}</td>
                                    <td>${keyword.payment}元</td>
                                    <td>${keyword.number}件</td>
                                    <td>
                                        <c:if test="${keyword.status == 1}">等待取货</c:if>
                                        <c:if test="${keyword.status == 2}">取货中</c:if>
                                        <c:if test="${keyword.status == 3}">请洗中</c:if>
                                        <c:if test="${keyword.status == 4}">请洗完成</c:if>
                                        <c:if test="${keyword.status == 5}">送货中</c:if>
                                        <c:if test="${keyword.status == 6}">已完结</c:if>
                                    </td>
                                    <td>${keyword.remarks}</td>

                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <ul class="pagination" style="padding-bottom: 62px; padding-left: 40%;">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                    <div id="todaySuccess" style="display: none;">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th style="width: 12%">时间</th>
                                <th style="width: 20%">订单号</th>
                                <th style="width: 10%">金额</th>
                                <th style="width: 10%">数量</th>
                                <th style="width: 10%">状态</th>
                                <td >备注</td>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${success}" var="keyword" varStatus="id">
                                <tr>
                                    <td><jsp:setProperty name="timestamp" property="time" value="${keyword.orderDate}"/>
                                        <fmt:formatDate value="${timestamp}" pattern="yyyy/MM/dd/ HH:mm:ss"/></td>
                                    <td>${keyword.orderNo}</td>
                                    <td>${keyword.payment}元</td>
                                    <td>${keyword.number}件</td>
                                    <td>
                                        <c:if test="${keyword.status == 1}">等待取货</c:if>
                                        <c:if test="${keyword.status == 2}">取货中</c:if>
                                        <c:if test="${keyword.status == 3}">请洗中</c:if>
                                        <c:if test="${keyword.status == 4}">请洗完成</c:if>
                                        <c:if test="${keyword.status == 5}">送货中</c:if>
                                        <c:if test="${keyword.status == 6}">已完结</c:if>
                                    </td>
                                    <td>${keyword.remarks}</td>

                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <ul class="pagination" style="padding-bottom: 62px; padding-left: 40%;">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                    <div id="noSuccess" style="display: none;">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th style="width: 12%">时间</th>
                                <th style="width: 20%">订单号</th>
                                <th style="width: 10%">金额</th>
                                <th style="width: 10%">数量</th>
                                <th style="width: 10%">状态</th>
                                <td >备注</td>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${Untreated}" var="keyword" varStatus="id">
                                <tr>
                                    <td><jsp:setProperty name="timestamp" property="time" value="${keyword.orderDate}"/>
                                        <fmt:formatDate value="${timestamp}" pattern="yyyy/MM/dd/ HH:mm:ss"/></td>
                                    <td>${keyword.orderNo}</td>
                                    <td>${keyword.payment}元</td>
                                    <td>${keyword.number}件</td>
                                    <td>
                                        <c:if test="${keyword.status == 1}">等待取货</c:if>
                                        <c:if test="${keyword.status == 2}">取货中</c:if>
                                        <c:if test="${keyword.status == 3}">请洗中</c:if>
                                        <c:if test="${keyword.status == 4}">请洗完成</c:if>
                                        <c:if test="${keyword.status == 5}">送货中</c:if>
                                        <c:if test="${keyword.status == 6}">已完结</c:if>
                                    </td>
                                    <td>${keyword.remarks}</td>

                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <ul class="pagination" style="padding-bottom: 62px; padding-left: 40%;">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                    <div id="income" style="display: none;">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th style="width: 12%">时间</th>
                                <th style="width: 20%">订单号</th>
                                <th style="width: 10%">金额</th>
                                <th style="width: 10%">数量</th>
                                <th style="width: 10%">状态</th>
                                <td >备注</td>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${Turnover}" var="keyword" varStatus="id">
                                <tr>
                                    <td><jsp:setProperty name="timestamp" property="time" value="${keyword.orderDate}"/>
                                        <fmt:formatDate value="${timestamp}" pattern="yyyy/MM/dd/ HH:mm:ss"/></td>
                                    <td>${keyword.orderNo}</td>
                                    <td>${keyword.payment}元</td>
                                    <td>${keyword.number}件</td>
                                    <td>
                                        <c:if test="${keyword.status == 1}">等待取货</c:if>
                                        <c:if test="${keyword.status == 2}">取货中</c:if>
                                        <c:if test="${keyword.status == 3}">请洗中</c:if>
                                        <c:if test="${keyword.status == 4}">请洗完成</c:if>
                                        <c:if test="${keyword.status == 5}">送货中</c:if>
                                        <c:if test="${keyword.status == 6}">已完结</c:if>
                                    </td>
                                    <td>${keyword.remarks}</td>

                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <ul class="pagination" style="padding-bottom: 62px; padding-left: 40%;">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="${bp}/static/assets/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Js -->
<script src="${bp}/static/assets/js/bootstrap.min.js"></script>

<!-- Metis Menu Js -->
<script src="${bp}/static/assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="${bp}/static/assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="${bp}/static/assets/js/morris/morris.js"></script>


<script src="${bp}/static/assets/js/easypiechart.js"></script>
<script src="${bp}/static/assets/js/easypiechart-data.js"></script>

<script src="${bp}/static/assets/js/Lightweight-Chart/jquery.chart.js"></script>

<!-- Custom Js -->
<script src="${bp}/static/assets/js/custom-scripts.js"></script>

<script type="text/javascript">
    function today(){
        // alert()
    //    页面切换
        $("#today").css("display","block");
        $("#todaySuccess").css("display","none");
        $("#noSuccess").css("display","none");
        $("#income").css("display","none");
        $("#tab1").css("background-color","#FFFACD");

        $("#tab2").css("background-color","#FFFFFF");
        $("#tab3").css("background-color","#FFFFFF");
        $("#tab4").css("background-color","#FFFFFF");

    }
    function todaySuccess(){
        $("#today").css("display","none");
        $("#todaySuccess").css("display","block");
        $("#noSuccess").css("display","none");
        $("#income").css("display","none");
        $("#tab2").css("background-color","#FFFACD");

        $("#tab1").css("background-color","#FFFFFF");
        $("#tab3").css("background-color","#FFFFFF");
        $("#tab4").css("background-color","#FFFFFF");
    }
    function noSuccess(){
        $("#today").css("display","none");
        $("#todaySuccess").css("display","none");
        $("#noSuccess").css("display","block");
        $("#income").css("display","none");
        $("#tab3").css("background-color","#FFFACD");

        $("#tab1").css("background-color","#FFFFFF");
        $("#tab2").css("background-color","#FFFFFF");
        $("#tab4").css("background-color","#FFFFFF");
    }
    function income(){
        $("#today").css("display","none");
        $("#todaySuccess").css("display","none");
        $("#noSuccess").css("display","none");
        $("#income").css("display","block");
        $("#tab4").css("background-color","#FFFACD");

        $("#tab1").css("background-color","#FFFFFF");
        $("#tab2").css("background-color","#FFFFFF");
        $("#tab3").css("background-color","#FFFFFF");
    }
</script>

</body>

</html>